<template>
	<template v-for="(item, index) in tagList" :key="index">
		<el-popover placement="top" :width="360" trigger="click" @show="editInputValue = item.value">
			<el-input maxlength="200" ref="tagInnerInput" v-model="editInputValue" class="tag_inner_input"> </el-input>
			<el-button type="primary" @click="updateValue(item, index)">更新规格值</el-button>
			<template #reference>
				<el-tag closable size="large" @close="handleClose(item, index)">
					<span class="tag_text">{{ item.label }} </span>
				</el-tag>
			</template>
		</el-popover>
	</template>
	<el-input
		maxlength="200"
		v-if="inputVisible"
		ref="saveTagInput"
		v-model="inputValue"
		class="input-new-tag"
		@keyup.enter="handleInputConfirm"
		@blur="handleInputConfirm"
	>
	</el-input>
	<el-button v-else class="button-new-tag" size="small" @click="showInput">+新增规格值</el-button>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { isEmpty } from '/@/utils';

export default {
	props: {
		modelValue: {
			type: Array,
			default: () => [],
		},
		specificationName: {
			type: String,
			default: '',
		},
	},
	emits: ['update:modelValue', 'changeTagList', 'inputTag', 'addSpecificationValue', 'delSpecificationValue'],
	data() {
		return {
			inputValue: '',
			editInputValue: '',
			inputVisible: false,
		};
	},
	computed: {
		tagList: {
			get() {
				return this.modelValue;
			},
			set() {
				this.emitData();
			},
		},
	},
	methods: {
		//删除
		handleClose(item, index) {
			ElMessageBox.confirm(`将删除连带数据[包括：规格设置中的数据]，是否继续删除？`, 'Warning', {
				confirmButtonText: '确认删除',
				cancelButtonText: '取消',
				type: 'warning',
				title: '重要提醒',
			})
				.then(async () => {
					this.tagList.splice(index, 1);
					this.$emit('update:modelValue', this.tagList);
					this.$emit('delSpecificationValue', { specificationName: this.specificationName, value: item.value, index });
				})
				.catch(() => {});
		},
		showInput() {
			this.inputVisible = true;
			this.$nextTick(() => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		//新增
		handleInputConfirm() {
			const isRepeat = this.isRepeat(this.inputValue);
			if (isRepeat) return;
			const inputValue = this.inputValue;
			if (inputValue) {
				this.tagList.push({ label: inputValue, value: inputValue });
			}
			this.inputVisible = false;
			this.inputValue = '';
			this.$emit('update:modelValue', this.tagList);
			this.$emit('addSpecificationValue', this.specificationName);
		},
		//更新值
		updateValue(item, index) {
			const isRepeat = this.isRepeat(this.editInputValue, index);
			if (isRepeat) return;
			const oldValue = item.value;
			const newValue = this.editInputValue;
			this.tagList.splice(index, 1, { label: newValue, value: newValue });
			this.$emit('update:modelValue', this.tagList);
			this.$emit('inputTag', { specificationName: this.specificationName, oldValue, newValue });
			ElMessage.success('更新成功！');
		},
		emitData() {
			this.$emit('update:modelValue', this.tagList);
			this.$emit('changeTagList');
		},
		//检查重复
		isRepeat(value, i) {
			let flag;
			if (isEmpty(i)) {
				flag = this.tagList.find((item) => item.value === value);
			} else {
				flag = this.tagList.find((item, index) => {
					if (i !== index) {
						return item.value === value;
					}
				});
			}
			if (flag) ElMessage.warning('规格值重复！');
			return flag;
		},
	},
};
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
	margin-left: 10px;
}
.el-tag {
	// position: relative;
	// min-width: 108px;
	// padding-right: 20px;
	// margin: 5px 0;
	.tag_text {
		cursor: pointer;
	}
	// .el-tag__close {
	//     position: absolute;
	//     top: 7px;
	//     right: 2px;
	// }
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.tag_inner_input {
	width: 220px;
	margin-right: 10px;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
}
</style>
